<template>
<div class="main">
    <div class="menu">
        <MainMenu :data="menuData"></MainMenu>
    </div>
    <div class="head-view">
        <div class="breadcrumb">
            <Breadcrumb>
                <BreadcrumbItem>{{$route.meta.title}}</BreadcrumbItem>
            </Breadcrumb>
        </div>
        <div class="user-panel">
            欢迎您！{{'张三'}}
            <img src="../assets/logout.png" style="vertical-align: bottom; margin-left: 5px; cursor: pointer;" @click="clickLogout">
        </div>
    </div>
    <div class="main-view">
        <router-view></router-view>
    </div>
</div>
</template>

<script>
import MainMenu from '@/components/MainMenu'

export default {
    components: {
        MainMenu
    },
    data() {
        return {
            menuData: [
                { title: '会议室管理', path: 'roomManage', url: require('../assets/roomManage.png')},
                { title: '设备管理', path: 'deviceManage', url: require('../assets/deviceManage.png')},
                { title: '会议管理', path: 'meetingManage', url: require('../assets/meetingManage.png')},
                { title: '声图管理', path: 'videoManage', url: require('../assets/videoManage.png')},
                { title: '角色管理', path: 'roleManage', url: require('../assets/roleManage.png')},
                { title: '委员提案管理', path: 'proposalManage', url: require('../assets/proposalManage.png')},
                { title: '委员履职管理', path: 'postManage', url: require('../assets/postManage.png')},
                { title: '终端数据管理', path: 'terminalManage', url: require('../assets/terminalManage.png')},
            ]
        };
    },
    computed: {
        ...Vuex.mapGetters([
            'getToken'
        ])
    },
    mounted() {
    },
    methods: {
        clickLogout(){
            // let token = this.getToken
            // loginService.logout(token).then(res=>{
            //     let result = res.data;
            //     let code = result.rescode;
            //     let resmsg = result.msg;
            //     if(code == 200){
            //         this.removeToken('token')
                    this.$router.replace({
                        name:'login'
                    })
            //     } else {
            //         this.$Message.error(resmsg);                    
            //     }
            // })
        },
    }
};
</script>

<style lang="less" scoped>
.main {
    height: 100%;
    position: relative;
     .head-view {
        min-width: 1200px;
        height: 70px;
        position: absolute;
        background-color: #fff;
        right: 0;
        left: 240px;
        box-shadow: 0 0 6px #999;
        z-index: 2;
        display: flex;
        align-items: center;
        padding: 0 80px 0 20px;
        .breadcrumb {
            flex: 1;
        }
    }
}



.menu {
    height: 100%;
    background-color: #515a6e;
    width: 240px;
    position: absolute;

}

.main-view {
        position: absolute;
        top: 90px;
        left: 260px;
        right: 0;
        bottom: 0;
        min-width: 1200px;
    }
</style>
